<template>
  <div class="container">
    <el-dialog
      :visible.sync="dialogVisible"
      width="384px"
      :modal="false"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="content">
        <div class="logo">
          <!-- <el-image  style=" height: 60px" :src="logo" alt="404"  fit="fit" /> -->
        </div>
        <div class="form">
          <!-- 账号密码登录 -->
          <div v-if="status==1">
            <div class="from-type">
              <div>账号密码登录</div>
              <span @click="status=2">验证码快捷登录<i class="iconfont icon-xiangyoujiantou" /></span>
            </div>
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item prop="account">
                <el-input v-model="form.account" placeholder="手机号 / 邮箱" />
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="密码" show-password />
              </el-form-item>
              <el-button class="login" type="primary" size="medium" :loading="loading" @click="login">{{ !loading ? '登录' : '登录中' }}</el-button>
              <div class="other-item">
                <div @click="status=3">忘记密码？</div>
              </div>
            </el-form>
          </div>
          <!-- 验证码快捷登录 -->
          <div v-else-if="status==2">
            <div class="from-type">
              <div>验证码快捷登录</div>
              <span @click="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou" /></span>
            </div>
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item prop="account">
                <el-input v-model="form.account" placeholder="手机号 / 邮箱" />
              </el-form-item>
              <el-form-item prop="code">
                <div class="code">
                  <el-input v-model="form.code" class="code-input" placeholder="验证码" />
                  <el-button class="code-btn" size="medium" @click="getVerifyCode">获取验证码</el-button>
                </div>
              </el-form-item>
              <el-button class="login" type="primary" size="medium" :loading="loading" @click="LogInToregister">{{ !loading ? '登录 / 注册' : '登录 / 注册中' }}</el-button>
            <!-- <div class="other-item">
              <div>忘记密码？</div>
            </div> -->
            </el-form>
          </div>
          <!-- 通过手机/邮箱重设密码 -->
          <div v-else-if="status==3">
            <div class="from-type">
              <div>通过手机/邮箱重设密码</div>
              <!-- <span @click="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou"></i></span> -->
            </div>
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item prop="account">
                <el-input v-model="form.account" placeholder="手机号 / 邮箱" />
              </el-form-item>
              <el-form-item prop="code">
                <div class="code">
                  <el-input v-model="form.code" class="code-input" placeholder="验证码" />
                  <el-button class="code-btn" size="medium" @click="getVerifyCode">获取验证码</el-button>
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="新密码" show-password />
              </el-form-item>
              <el-button class="login" type="primary" size="medium" :loading="loading" @click="resetPassword">{{ !loading ? '重设密码' : '重设密码中' }}</el-button>
              <div class="other-item">
                <div @click="status=1">想起密码？</div>
              </div>
            </el-form>
          </div>
        </div>
        <div v-if="status!=3" class="other">
          <!-- <el-divider>第三方登录</el-divider> -->
          <ul>
            <a :href="weChatUrl"><li><i class="iconfont icon-weixin" /></li></a>
            <li><i class="iconfont icon-qq" /></li>
            <li><i class="iconfont icon-xinlangweibo" /></li>
            <li><i class="iconfont icon-shejiaotubiao-09" /> </li>
            <li><i class="iconfont icon-weiruan" /></li>
            <a :href="githubUrl"><li><i class="iconfont icon-github" /></li></a>
          </ul>
        </div>
        <div v-if="status!=3" class="from-reading">
          登录注册即代表同意xx<span>《用户协议》</span>和<span>《隐私协议》</span>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { validMobile, validEmail, validPassword } from '@/utils/validate'
import { getVerifyCode } from '@/api/news/pc-web/verifyCode'
import { quick, login, quickUpdatePassword, gitHubLogin, weChatLogin } from '@/api/news/pc-web/user'
export default {
  name: 'Login',
  components: {},
  data() {
    var validAccount = (rule, value, callback) => {
      if (!validMobile(value) && !validEmail(value)) return callback(new Error('请输入有效的账号'))
      callback()
    }
    var validPasswordd = (rule, value, callback) => {
      if (!validPassword(value)) return callback(new Error('密码只能由数字和字母组成'))
      callback()
    }
    return {
      githubUrl: 'https://github.com/login/oauth/authorize?client_id=88f028142403410abfef&redirect_uri=http://127.0.0.1:8888/dashboard',
      weChatUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd4a837c38b866355&redirect_uri=http://127.0.0.1:8888/dashboard&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect',
      status: 1,
      dialogVisible: true,
      loading: false,
      logo: require('@/assets/common/logo1.png'),
      form: {
        account: '',
        password: '',
        code: ''
      },
      rules: {
        account: [
          // { required: true, message: '请输入手机号码或邮箱账号', trigger: 'blur' },
          { required: true, message: ' ', trigger: 'blur' },
          { validator: validAccount, trigger: 'blur' }
        ],
        password: [
          // { required: true, message: '请输入密码', trigger: 'blur' },
          { required: true, message: ' ', trigger: 'blur' },
          { min: 6, message: '密码最小长度为6个字符', trigger: 'blur' },
          { validator: validPasswordd, trigger: 'blur' }
        ],
        code: [
          { required: true, message: ' ', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  mounted() {
    // console.log(window.location.href.indexOf("code=") !==-1);判断是否否找到code=
    if (window.location.href.indexOf('code=') == -1) {

    } else {
      //  this.gitHubLogin()
      // this.weChatLogin()
    }
  },
  methods: {
    async weChatLogin() {
      const weChatCode = window.location.href.split('?code=')[1].split('&')
      const res = await weChatLogin({ code: weChatCode[0] })
      console.log(res)
      this.$message.success('WeChat登录成功')
    },
    async gitHubLogin() {
      var str = window.location.href.substr(window.location.href.indexOf('code=') + 5)
      var Code = str.substr()
      const res = await gitHubLogin({ code: Code })
      console.log(res)
      this.$message.success('gitHub登录成功')
    },
    // 获取验证码
    async getVerifyCode() {
      await getVerifyCode({ account: this.form.account })
      this.$message.success('验证码发送成功')
    },
    // 关闭对话框
    handleClose(done) {
      done()
      this.$router.push({ path: history.back() || '/mall' })
      this.form = {}
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    // 账号密码登录
    async login() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          await login(this.form)
          this.$message.success('登录成功')
          this.dialogVisible = false
          this.form = {}
        }
      })
    },
    // 登录或注册
    async LogInToregister() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          await quick(this.form)
          this.$message.success('登录成功')
          this.dialogVisible = false
          this.form = {}
        }
      })
    },
    // 重设密码
    async resetPassword() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          await quickUpdatePassword(this.form)
          this.$message.success('重设密码成功,请使用您设置的新密码登录')
          this.status = 1
          this.form = {}
        }
      })
    }
    // login(){
    //   this.$refs.form.validate(async (isOK) => {
    //   if (isOK) {
    //     console.log('验证成功');
    //     this.loading = true
    //    setTimeout(() => {
    //       this.loading = false
    //    }, 1000);
    //     // this.dialogVisible=!this.dialogVisible
    //   } else {
    //   }
    // });
    // }
  }
}
</script>
<style lang="scss" scoped>
.container{
  position: relative;
  height: 100vh;
  background-size: 300%;
  background-image: linear-gradient(
    to bottom right,
    #4262bb,
    #9c8bca,
    #3698d0,
    #6989d8,
    #d550a0
  );
  animation:bgAnimation 10s linear infinite;
  @keyframes bgAnimation {
    0%{
      background-position: 0% 25%;
    }
    25%{
      background-position: 25% 0%;
    }
    50%{
      background-position: 50% 25%;
    }
    75%{
      background-position: 75% 50%;
    }
    100%{
      background-position: 0% 75%;
    }
  }
}
// .content{
//   width: 384px;
//   background:#fff;
//    padding: 5px 32px 32px;
//    border-radius: 8px;
//    box-shadow: 0 0 5px rgba(119, 139, 210, 0.5);
//    position:absolute;
//   left: 50%;
//   top: 50%;
//   transform: translate(-50%, -50%);
// }
::v-deep .el-dialog {
  box-sizing: border-box;
  border-radius: 16px;
  box-shadow: 0 0 5px 5px rgba(111, 136, 226, 0.3);
  .el-dialog__header {
    padding: 5px;
}
  .el-dialog__body {
    padding: 0px 32px 32px;
}
.el-icon-close{
  font-size: 18px;
}
}
.logo{
  margin:30px 0px;
}
.form{
  .from-type{
    display:flex;
    justify-content:space-between;
    height: 20px;
    line-height: 20px;
    div:nth-child(1){
      font-size:20px;
      font-weight: 500;
      border-left: 3px solid #328BF9;
      padding-left:5px;
    }
     span{
       cursor: pointer;
       color: #328BF9;
       .icon-xiangyoujiantou{
         font-size:13px;
       }
    }

  }
  .el-form{
    margin-top: 40px;
    ::v-deep .el-input__inner{
      border-radius: 8px;
    }
    ::v-deep .el-form-item {
      margin-bottom: 16px;
    }
    .code{
    display:flex;
    justify-content:space-between;
    }
    .code-input{
      margin-right: 15px;
      // display: block;
      //  width: 65%;
      // margin: 8px 0px 16px;
    }
     .code-btn{
      //  width: 30%;
      // margin: 8px 0px 16px;
    }
    .login{
       width: 100%;
      margin: 8px 0px 16px;
    }
    // .el-button{
    //  width: 100%;
    //  margin: 8px 0px 16px;
    // }
    .el-button--medium {
       border-radius: 8px;
    }
  }
 .other-item{
   display:flex;
    justify-content:space-between;
    margin-bottom: 30px;
     div{
       cursor: pointer;
     }
    // height: 40px;
    // line-height: 40px;
 }
}
.other{
  margin-bottom: 20px;
  .el-divider__text, .el-link {
    font-weight: 400;
    font-size: 12px;
}
.el-divider--horizontal {
    margin: 20px 0;
}
  ul{
    display:flex;
    justify-content: space-evenly;
    list-style:none;
    li:hover{
      border:1px solid #25abef;
    }
    li{
      display: flex;
      align-items: center;
      justify-content: center;
      // cursor: pointer;
      width: 33px;
      height: 33px;
      border:1px solid #e5e7e8;
      border-radius: 100px;
    }
  }
    .iconfont{
      font-size:18px;
    }
    .icon-weixin{
      color: rgb(74, 221, 51);
    }
    .icon-qq{
      //  font-size:16px;
      color: rgb(87, 139, 222);
    }
    .icon-xinlangweibo{
      color: rgb(244, 94, 75);
    }
    .icon-shejiaotubiao-09{
      color: rgb(93, 140, 241);
    }
    .icon-weiruan{
      color: rgb(93, 140, 241);
    }
     .icon-github{
      color: rgb(10, 24, 54);
    }
}
.from-reading{
    font-size: 12px;
    text-align: center;
    span{
      cursor: pointer;
      color: #328BF9;
    }
}
</style>
